<template>
  <div>
    <vxe-button @click="insertEvent()">新增</vxe-button>

    <vxe-table
      ref="tableRef"
      border
      :data="tableData"
      height="300"
      show-overflow
      @cell-dblclick="cellDblclickEvent"
    >
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="key" title="字段名"></vxe-column>
      <vxe-column field="value" show-overflow title="字段值"></vxe-column>
      <vxe-column field="type" title="字段类型"></vxe-column>
      <vxe-column show-overflow title="操作" width="100">
        <template #default="{ row }">
          <vxe-button
            icon="vxe-icon-edit"
            mode="text"
            @click="editEvent(row)"
          ></vxe-button>
          <vxe-button
            icon="vxe-icon-delete"
            mode="text"
            @click="removeEvent(row)"
          ></vxe-button>
        </template>
      </vxe-column>
    </vxe-table>

    <button @click="test">test</button>
    <vxe-drawer
      v-model="showEdit"
      destroy-on-close
      :loading="submitLoading"
      :title="selectRow ? '编辑&保存' : '新增&保存'"
      width="800"
    >
      <template #default>
        <vxe-form
          :data="formData"
          :rules="formRules"
          title-align="right"
          title-width="100"
          @submit="submitEvent"
        >
          <vxe-form-item
            field="key"
            :item-render="{}"
            :span="24"
            title="字段名"
          >
            <template #default="{ data }">
              <vxe-input
                v-model="data.key"
                placeholder="请输入字段名"
              ></vxe-input>
            </template>
          </vxe-form-item>

          <vxe-form-item
            field="type"
            :item-render="{}"
            :span="24"
            title="字段类型"
          >
            <template #default="{ data }">
              <vxe-select v-model="data.type" transfer @change="onSelectChange">
                <vxe-option
                  v-for="item in TypeEnum"
                  :key="item"
                  :label="item"
                  :value="item"
                ></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>

          <vxe-form-item
            field="value"
            :item-render="{}"
            :span="24"
            title="字段值"
          >
            <template #default="{ data }">
              <vxe-input
                v-if="
                  data.type === TypeEnum.string || data.type === TypeEnum.number
                "
                v-model="data.value"
                placeholder="请输入字段值"
              ></vxe-input>
              <vxe-textarea
                v-else
                ref="textAreaRef"
                v-model="data.value"
                placeholder="可以调节元素的宽度和高度"
                resize="both"
                rows="20"
                showWordCount
              ></vxe-textarea>
              <!--              {{ textAreaRef }}-->
            </template>
          </vxe-form-item>

          <vxe-form-item align="center" :span="24" title-align="left">
            <template #default>
              <vxe-button type="reset">重置</vxe-button>
              <vxe-button status="primary" type="submit">提交</vxe-button>
            </template>
          </vxe-form-item>
        </vxe-form>
      </template>
    </vxe-drawer>
  </div>
</template>

<script lang="ts" setup>
const test = () => {
  const x = tableData.value[0].value
  console.log('x', x)
  new Function(x)()
}
import { reactive, ref } from 'vue'
import { VxeUI, VxeTableInstance, VxeTableEvents } from 'vxe-table'
import { VxeFormPropTypes } from 'vxe-pc-ui'
enum TypeEnum {
  string = 'string',
  number = 'number',
  innerFunction = 'innerFunction',
  customFunction = 'customFunction'
}
interface RowVO {
  id: number
  key: string
  value: string
  type: string
}

const tableRef = ref<VxeTableInstance<RowVO>>()
const textAreaRef = ref()
const formData = reactive({
  key: '',
  value: '',
  type: ''
})

const submitLoading = ref(false)
const showEdit = ref(false)
const selectRow = ref<RowVO | null>()
const tableData = ref<RowVO[]>([])

const formRules = reactive<VxeFormPropTypes.Rules>({
  key: [
    { required: true, message: '请输入字段名' }
    // { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
  ],
  value: [{ required: true, message: '请输入字段值' }],
  type: [{ required: true, message: '请选择字段类型' }]
})

const insertEvent = () => {
  Object.assign(formData, {
    key: '',
    value: '',
    type: TypeEnum.string
  })
  selectRow.value = null
  showEdit.value = true
}

const editEvent = (row: RowVO) => {
  Object.assign(formData, row)
  selectRow.value = row
  showEdit.value = true
}

const cellDblclickEvent: VxeTableEvents.CellDblclick<RowVO> = ({ row }) => {
  editEvent(row)
}

const removeEvent = async (row: RowVO) => {
  const type = await VxeUI.modal.confirm('您确定要删除该数据?')
  if (type === 'confirm') {
    const $table = tableRef.value
    if ($table) {
      $table.remove(row)
    }
  }
}

const submitEvent = () => {
  submitLoading.value = true
  setTimeout(() => {
    const $table = tableRef.value
    if ($table) {
      submitLoading.value = false
      showEdit.value = false
      if (selectRow.value) {
        VxeUI.modal.message({ content: '保存成功', status: 'success' })
        Object.assign(selectRow.value, formData)
      } else {
        VxeUI.modal.message({ content: '新增成功', status: 'success' })
        $table.insert({ ...formData })
      }
    }
  }, 500)
}

const onSelectChange = () => {
  const type = formData.type

  const $textArea = textAreaRef.value
  console.log('type', type, $textArea)
  if ($textArea) {
    $textArea.focus()
  }
}

setTimeout(() => {
  const list: RowVO[] = [
    {
      id: 10001,
      key: 'username',
      value: 'alert(111)',
      type: TypeEnum.string
    }
  ]
  tableData.value = list
}, 100)
</script>
